<template>
	<el-input ref="input" v-model="fieldValue" :formatter="setNum" clearable :maxlength="20" v-bind="$attrs">
		<template v-for="(slotKey, slotIndex) in Object.keys($slots)" :key="slotIndex" v-slot:[slotKey]>
			<slot :name="slotKey"></slot>
		</template>
	</el-input>
</template>

<script setup name="MyInputNumber">
import { useVModel } from '@vueuse/core';

const emit = defineEmits(['update:modelValue']),
	/***
	 * 参数属性
	 * @property {} modelValue 默认值
	 * @property {String} numberType 数据类型（整型，浮点型）默认为整型，float-n，n为保留小数点后几位
	 * @property {Number} `numberType=init` 时才有效， numberLength 只能输入几位整数
	 */
	props = defineProps({
		modelValue: null,
		numberType: {
			type: [String],
			default: 'init',
			validator: function (val) {
				const data = val.split('-');
				return ['init', 'float'].includes(data[0]);
			}
		},
		numberLength: Number
	}),
	fieldValue = useVModel(props, 'modelValue', emit);

let type = computed(() => props.numberType.split('-')[0]),
	digit = computed(() => props.numberType.split('-')[1]);

// 数字最终结果逻辑
const attrs = useAttrs();
function setNum(val) {
	if (type.value === 'float') {
		val = val.replace(/[^\d.]/g, '').replace(/^\./, ''); //只保留数字和点(".")，其余的字符都去掉,以.开始的也去掉
		val = val.replace(/\.{2,}/g, '.'); //只保留第一个点("."),有两个点(".")只保留一个
		val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.'); //把点(".")进行转换防止被正则表达式抹掉
		val = val.replace(new RegExp(`^(\\-)*(\\d+)\\.(\\d{${digit.value}}).*$`), '$1$2.$3'); //限制只能输入几位小数
		if (val.indexOf('.') < 0 && val != '') {
			//限制首位不能是0
			val = parseFloat(val);
		}
	} else if (type.value === 'init') {
		val = val.replace(/[^0-9]/gi, '');
		if (props.numberLength) val = val.slice(0, props.numberLength);
	}
	// 判断最大值逻辑
	if (attrs.max && Number(val) > Number(attrs.max)) return attrs.max;
	// 判断最小值逻辑
	if (attrs.min && Number(val) < Number(attrs.min)) return attrs.min;
	return val;
}
</script>
